<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
    <!-- onload 事件会在整个页面加载完成之后才触发 -->

    <!-- 为Windows绑定一个onload事件 -->
<!-- 这样可以确保我们的代码执行时所有的DOM对象都已经加载完毕 -->

    <script>
          window.onload = function(){
        var btn = document.getElementById("btn")
        btn.onclick = function(){
            alert("你还点····");
        };
    };
    </script>
      



</head>
<body>

    <!-- <button id="btn" onclick="alert('点我干嘛');">这是一个按钮</button> -->
     <!-- 这种写法称之为耦合，不方便维护，不推荐使用 -->
    

 



     <button id="btn" >这是一个按钮</button>
   
   <script>

        // var btn = document.getElementById("btn")


// 可以为按钮的对应时间绑定处理函数的形式来响应事件，这样当事件触发时，其对应的函数也会被调用

// 绑定一个单击事件：
// 像这种行为单击事件绑定的函数，我们称为单击响应函数
        // btn.onclick = function(){
        //     alert("你还点····");
        // };
            

      
        var div=document.querySelector("div");
        // 元素就是HTML标签，不包含注释，文本，换行，文档















    </script>
</body>
</html>